<template>
  <div class="articleDetail">
      <Nav :title="title" :path="path"></Nav>
    <img class="imgSrc"
           :src="result.imgSrc"
           alt="">
    <div class="header">
      <div class="user">
        <img class="avatar"
               :src="result.avatar"
               alt="">
        <div class="author">{{result.author}}</div>
        <div>发表于</div>
        <div>{{result.dateTime}}</div>
      </div>
      <div class="title">{{result.title}}</div>
      <img class="collect" 
             :src="result.collected?collected:collectBefore"
            @click="handleCollect(result._id)">
      <img class="share"
             :src="result.share?share:shareBefore"
             alt="">
    </div>
    <div class="content">
      <div class="label">1.引言</div>
      <div>{{result.detail}}</div>
    </div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            title:'阅读',
            path:'/tabbar/article',
            result: {},
            collected:require('@/assets/images/icon/collection.png'),
            collectBefore:require('@/assets/images/icon/collection-anti.png'),
            share:require('@/assets/images/icon/share.png'),
            shareBefore:require('@/assets/images/icon/share-anti.png')
        }
    },
    mounted () {
        var id = this.$route.query.id
        this.$http.get(`/articleDetail?id=${id}`).then(res => {
        this.result = res.data.data[0]
        })
    },
    methods: {
        handleCollect(id){
            this.result.collected = !this.result.collected
            var collected = this.result.collected
            var data ={id,collected}
            this.$http.post('/articleCollect',data)
        }
    },
}
</script>

<style scoped>
.articleDetail{
    margin-top: 90px;
}
.imgSrc{
    width: 100%;
    height: 460px;
}
.header{
    padding:20px 20px;
    position: relative;
}
.avatar{
    width: 65px;
    height: 65px;
}
.user{
    color: #666;
    display: flex;
    margin-bottom: 30px;
}
.user div{
    margin-right: 30px;
    line-height: 65px;
    font-size: 30px;
}
.user .author{
    margin-left: 20px;
    font-size: 36px;
}
.title{
    font-size: 35px;
    font-weight: bold;
    color: #60697D;
    letter-spacing:4px;
    line-height: 60px;
    padding-bottom: 70px;
    border-bottom: 1px solid #eee;
}
.collect,.share{
    position: absolute;
    width: 100px;
    height: 100px;
}
.collect{
    right: 166px;
    top: 75%;
}
.share{
    right: 33px;
    top: 75%;
}
.content{
    margin-top: 20px;
    padding:0 33px;
    font-size: 17px;
    letter-spacing: 3px;
    line-height: 50px;
    color: #666;
}
.label{
    margin-bottom: 30px;
}
</style>